<template>
  <div class="all">
    <van-icon name="arrow-left" @click="goindex" />
    <div class="content">
      <h2>壹点灵注册</h2>
      <p>请放心注册和登录，壹点灵充分保函户您的隐私</p>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            name="username"
            v-model="state.phone"
            placeholder="请输入11位手机号"
            :rules="[
              {
                required: true,
                pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                message: '请输入正确格式手机号',
                trigger: 'onBlur',
              },
            ]"
          >
            <template #label>
              <van-dropdown-menu>
                <van-dropdown-item v-model="state.value1" :options="option1" />
              </van-dropdown-menu>
            </template>
          </van-field>
          <van-field
            v-model="state.password"
            type="password"
            name="password"
            placeholder="设置6-12位密码"
            :rules="[
              {
                required: true,
                message: '密码不符合规范',
                pattern: /[a-z]{6}/,
                trigger: 'onBlur',
              },
            ]"
          />
          <van-field
            v-model="state.repassword"
            name="repassword"
            type="password"
            placeholder="请再次输入密码"
            :rules="[{ required: true, pattern: /[a-z]{6}/ }]"
            @change="vertify"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
          >
            注册
          </van-button>
        </div>
      </van-form>
      <van-checkbox v-model="checked"
        ><span class="span1">点击注册即代表您同意</span
        ><span class="span2">《壹点灵用户使用协议》</span> 、<span class="span3"
          >《隐私协议》</span
        >
        和<span>《注册协议》</span></van-checkbox
      >
    </div>
  </div>
</template>

<script>
import { getRegister } from "../utils/api";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import {Notify} from "vant";
let flag = true;
export default {
  setup() {
    const state = reactive({
      phone: "",
      password: "",
      value1: 0,
      repassword: "",
    });
    const option1 = [
      { text: "中国", value: 0 },
      { text: "86", value: 1 },
      { text: "13", value: 2 },
    ];
    const checked = ref(true);
    const router = useRouter();
    const vertify = () => {
      if (state.repassword !== state.password) {
        Notify({ type: "danger", message: "密码输入不一致" });
        flag = false;
      }
    };
    const onSubmit = async(values)=>{
      if(flag){
       const res= await getRegister(values);
        switch(res.status){
         case 0:
           router.push("/login");
           Notify({ type: "success", message: res.msg });
           break;
          case 2:
          Notify({ type: "danger", message: res.msg });
          break;
        }
      }else{
        Notify({ type: "danger", message: "密码输入不一致" });
        flag=true;
      }

    }
    const goindex = () => {
      router.push("/home/index");
    };
    return {
      state,
      option1,
      vertify,
      goindex,
      checked,
      onSubmit,
    };
  },
};
</script>
<style lang="less" scoped>
.all {
  box-sizing: border-box;
  padding: 40px 25.5px;
}
/deep/.content {
  margin-left: 20px;
  h2 {
    font-size: 20px;
    color: #282828;
  }
  p {
    margin-top: 10px;
    font-size: 11px;
    color: #c5c5c5;
    span {
      color: #5d5d5d;
    }
  }
}
.van-form {
  margin-left: -30px;
}
.van-cell {
  align-items: center;
  font-size: 15px;
}
/deep/.van-dropdown-menu__item {
  justify-content: flex-start;
}
/deep/.van-dropdown-menu__title::after {
  right: -15px;
}
/deep/.van-checkbox__label {
  font-size: 12px;
  .span1 {
    color: #c5c5c5;
  }
  .span2 .span3 {
    color: #aaaaaa;
  }
}
</style>
